<template>
  <div class="drill">
    <div class="title">
      <p class="tip">基本信息 </p>
    </div>
    <div class="details">
      <p class="titBox">基本信息</p>
      <el-descriptions :column="5" direction="vertical">
        <el-descriptions-item label="计划单号">
          <div class="substance">{{ qhylPlans.qhyljhCode ? qhylPlans.qhyljhCode : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="演练名称">
          <div class="substance">{{ qhylPlans.qhyljhName ? qhylPlans.qhyljhName : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="系统名称">
          <div class="substance">{{ qhylPlans.sysName ? qhylPlans.sysName : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="演练类型">
          <div class="substance">{{ qhylPlans.qhyljhType ? qhylPlans.qhyljhType : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="所属处室">
          <div class="substance">{{ qhylPlans.qhyljhDept ? qhylPlans.qhyljhDept : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="演练负责人">
          <div class="substance">{{ qhylPlans.qhyljhFzr ? qhylPlans.qhyljhFzr : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="网络二处维护人">
          <div class="substance">{{ qhylPlans.qhyljhNet ? qhylPlans.qhyljhNet : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="计划完成状态">
          <div class="substance">{{ qhylPlans.qhyljhStart ? qhylPlans.qhyljhStart : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="计划演练月份">
          <div class="substance">{{ qhylPlans.qhyljhDate ? qhylPlans.qhyljhDate : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="实际演练日期">
          <div class="substance">{{ qhylPlans.sjylDate ? qhylPlans.sjylDate : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="未按计划演练原因" span="5">
          <div class="substance">{{
            qhylPlans.qhyljhNotCause ? qhylPlans.qhyljhNotCause : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="备注" span="5">
          <div class="substance">{{ qhylPlans.n3 ? qhylPlans.n3 : '--' }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="Drill_plan">
      <div class="title">
        <p class="drillName">附件 </p>
      </div>
      <!-- <el-button type="primary">下载附件</el-button>
      <el-button type="primary">预览附件</el-button> -->
      <div class="tableBox">
        <div class="table" ref="container">
          <el-table ref="multipleTableRef" :data="files" tooltip-effect="dark" stripe>
            <!-- @select="selectChange"
            @selection-change="handleSelectionChange"
            row-key="getRowKey"
            @row-click="handleRowClick" -->
            <!-- <el-table-column
              align="center"
              :reserve-selection="false"
              type="selection"
            ></el-table-column> -->
            <el-table-column
              align="center"
              prop="qhyljhCode"
              label="计划单号"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhType"
              label="演练类型"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhName"
              label="演练名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhDate"
              label="计划演练月份"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhFzr"
              label="演练负责人"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhStart"
              label="计划完成状态"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="createName"
              label="创建人"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, reactive, onMounted, watch } from 'vue';
  import { DisasterQhylPlanView } from '@/http/Disaster';
  // import { useRoute } from 'vue-router';
  // const router = useRouter();
  const props = defineProps({
    //是否为预览模式
    type: {
      type: String,
      default: ''
    }
  });
  // const route = useRoute();
  // const sysBasic = ref('');
  const qhylPlans = ref('');
  const files = reactive([]);
  onMounted(() => {
    Disaster_change();
  });
  const Disaster_change = () => {
    DisasterQhylPlanView({
      qhyljhId: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      qhylPlans.value = res.data.data.qhylPlan;
      // total.value = res.data.data.total;
    });
  };
  watch(
    () => props.type,
    () => {
      Disaster_change();
    }
  );
</script>
<style lang="less" scoped>
  .drill {
    // width: 100%;
    // height: 100vh;
    // background: rgb(84, 84, 95);
    background: #eaeef4;
    padding: 16px 27px 27px;
    box-sizing: border-box;
    overflow: scroll;
    .title {
      display: flex;
      justify-content: space-between;
      height: 45px;
      margin-bottom: 16px;
      .tip {
        line-height: 45px;
        font-size: 24px;
        font-weight: 400;
        color: #46545d;
        margin: 0;
        padding: 0;
      }
      .btn {
        width: 107px;
        height: 45px;
        background: #007af5;
        border-radius: 2px;
        color: #fff;
        font-size: 16px;
        border: 0;
        cursor: pointer;
      }
    }
    .details {
      background: #fff;
      padding: 27px;
      border-radius: 16px;
      margin-bottom: 27px;
      .titBox {
        font-size: 21px;
        font-weight: bold;
        color: #46535d;
        margin: 0;
        padding: 0;
        margin-bottom: 25px;
      }

      .el-descriptions {
        :deep(.el-descriptions__body) {
          .el-descriptions__table {
            .el-descriptions__cell {
              font-size: 19px;
              color: #46535d;
              margin-right: 25px !important;
              width: 18%;
              &.el-descriptions__label {
                padding: 13px 0;
              }
              &.el-descriptions__content {
                .substance {
                  height: 45px;
                  background: #ffffff;
                  border-radius: 3px 3px 3px 3px;
                  border: 1px solid #dddddd;
                  line-height: 45px;
                  padding-left: 13px;
                }
                padding: 0;
                padding-right: 25px;
              }
            }

            // :deep(.el-descriptions-item__label) {
            //   //margin-right: 3px;
            //   background: #fafafa !important;
            //   padding: 10px 10px 0;
            // }
          }
        }
      }
    }
    .Drill_plan,
    .Drill {
      background: #fff;
      padding: 27px;
      border-radius: 16px;
      .title {
        display: flex;
        justify-content: space-between;
        height: 45px;
        margin-bottom: 16px;
        .drillName {
          line-height: 45px;
          font-size: 21px;
          font-weight: 400;
          color: #46545d;
          margin: 0;
          padding: 0;
        }
        .btn {
          width: 107px;
          height: 45px;
          background: #007af5;
          border-radius: 2px;
          color: #fff;
          font-size: 16px;
          border: 0;
        }
      }
    }
    .Drill_plan {
      margin-bottom: 27px;
    }
  }
</style>
